<template>
  <div class="zhuye">
      <div style="display: flex;justify-content: center;align-items: center;">
        <el-row style="height: auto; width: 90%;
              background-image: url('/imgs/home/homebg.jfif');
              background-repeat: no-repeat;
              background-size: cover; /* 使用 cover 来覆盖整个容器 */
              background-position: center; /* 图片居中显示 */">
          <el-col :span="10" style="padding-top: 2px;">
            <img src="/imgs/login/outLogo.png" style="width: 50%; height: auto; display: block; margin-left: 5px;">
            <!-- 注意：这里我也添加了 display: block 和 margin: 0 auto 来让图片在 el-col 中水平居中 -->
          </el-col>
          <el-col :span="10" style="padding-top: 2px;">
              <div style="font-size: 24px; font-weight: bold;  padding-left: 20px;color: rgba(76, 175, 80, 1);font-size: xxx-large;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);" class="title-with-shadow;">游悠友旅</div>
            </el-col>
            <el-col :span="3">
              <el-dropdown trigger="click">
                <span class="avatar-wrapper" style="display: flex;position: relative;left:90%;align-items: center;margin-top: 15px;">
                  <el-avatar :size="49" :src="userUrl()" />
                  <span style="font-size: 25px;padding-left: 20px">{{user.nickname}}</span>
                </span>
                <template #dropdown>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click="userInfo()">修改信息</el-dropdown-item>
                  <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
                </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
            <el-menu
                :default-active="mainIndex"
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                unique-opened router
                @select="selectMenu"
                style="width: 100%;"
            >
              <el-menu-item index="/scene">景区按钮</el-menu-item>
              <el-menu-item index="/guide">导游按钮</el-menu-item>
              <el-menu-item index="/inform">消息按钮</el-menu-item>
              <el-menu-item index="/like">关注按钮</el-menu-item>
              <el-menu-item index="/community">社区按钮</el-menu-item>
            </el-menu>
          </el-row>
      </div>
      <el-main style="padding:5px;min-height:100vh;width: 90%;margin: 0 auto;overflow-y: auto;overflow-x: auto">
        <router-view/>
      </el-main>
      <el-footer style="background-color: #f5f5f5; text-align: center;">到底了~~别看了，看再多不如去走走。</el-footer>
  </div>
</template>


<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
const mainIndex = ref('/scene')

//获取登录的用户信息
const user = ref(getUser());


const userInfo = () => {
  console.log(user.value)
  window.location.href = '/userInfo';
}

const userUrl = () =>{
  let url = BASE_URL + user.value.imgUrl;
  return url;
}
//退出登录功能
const logout = ()=>{
  if (confirm('确定要退出吗?')){
    localStorage.removeItem('user');
    //退出时,面包屑也需要清空!
/*    localStorage.removeItem('breadCrumb');*/
    window.location.href = '/login';
    user.value = '';
  }
}

/*
//准备数组维护面包屑数据
 let map = {
   '/scene':['景区'],
   '/guide': ['导游'],
  '/inform': ['信息'],
   '/like':['喜欢'],
  '/community':['社区']
 };
 //定义变量维护当前面包屑的数据
 const breadCrumb = ref(JSON.parse(localStorage.getItem('breadCrumb')));
//选择菜单项时触发
const selectMenu = (index)=>{
  breadCrumb.value = map[index];
  localStorage.setItem('breadCrumb',JSON.stringify(breadCrumb.value));
};
*/



</script>
<style>
.zhuye{
  width: 100%;
  height: auto;
  background: linear-gradient( to bottom,#B0E0E6,#87CEFA,#00BFFF);
}


</style>

<style>
.shadow1{
    font-size: 40px;
    font-weight: bold;
    color: #258e39;
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6); /* 较大的阴影范围和较深的阴影颜色 */
}

.title-with-shadow{
  font-size: 32px; /* 加大字体大小 */
  font-weight: bold;
  color: #42b983; /* 保持原有颜色 */
  padding-left: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加文本阴影效果 */
}
</style>